<template>
	<div class="menulist">
		<div class="main">
			<div class="search">
			</div>
			<el-table @selection-change="changeFun" ref="multipleTable" :data="tablemenu" border id="menutable" style="width: 100%; text-align:left;" height="450">
				<el-table-column @selection-change="changeFun" type="selection" label="全选" width="55">
				</el-table-column>
				<el-table-column type="index" label="序号" width="60">
				</el-table-column>
				<el-table-column label="图标" width="150">
					<template slot-scope="scope">
						<img :src="scope.row.imgsrc" alt="">
					</template>
				</el-table-column>
				<el-table-column label="菜单名称">
					<template slot-scope="scope">
						<div v-if="scope.row.submenus.length<1">
							<router-link :to="{name:'菜单详情1',params:{detail:scope.row}}">{{scope.row.name}}</router-link>
						</div>
						<div v-if="scope.row.submenus.length>=1">
							<router-link :to="{name:'菜单详情2',params:{detail:scope.row}}">{{scope.row.name}}</router-link>
						</div>
					</template>
				</el-table-column>
				<el-table-column width="110" label="子菜单个数">
					<template slot-scope="scope">
						<div>{{scope.row.submenus.length}}</div>
					</template>
				</el-table-column>
				<el-table-column label="子菜单名称" width="230" class-name="mname" style="padding:0!important;">
					<template slot-scope="scope" class="zname">
						<div v-if="scope.row.submenus.length<=3">
							<ul class="tablelist">
								<li v-for="(item,index) in scope.row.submenus" :key="index">
									<icon-svg :icon-class="item.icon"></icon-svg>{{item.name}}</li>
							</ul>
						</div>
						<div v-if="scope.row.submenus.length>3">
							<ul class="tablelist">
								<li>
									<icon-svg :icon-class="scope.row.submenus[0].icon"></icon-svg>{{scope.row.submenus[0].name}}</li>
								<li>
									<icon-svg :icon-class="scope.row.submenus[1].icon"></icon-svg>{{scope.row.submenus[1].name}}</li>
								<li>
									<icon-svg :icon-class="scope.row.submenus[2].icon"></icon-svg>{{scope.row.submenus[2].name}}<span class="more" @click.stop="seeMore(scope.row.submenus)"><a href="javasrcipt:;">【更多】</a></span></li>
							</ul>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="链接类型" width="180" class-name="mname linktype">
					<template slot-scope="scope">
						<div v-if="scope.row.submenus.length<=3">
							<ul class="tablelist">
								<li v-for="(item,index) in scope.row.submenus" :key="index">{{item.type}}</li>
							</ul>
						</div>
						<div v-if="scope.row.submenus.length>3">
							<ul class="tablelist">
								<li>{{scope.row.submenus[0].type}}</li>
								<li>{{scope.row.submenus[1].type}}</li>
								<li>{{scope.row.submenus[2].type}}</li>
							</ul>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="备注" width="100">
					<template slot-scope="scope">
						<div>{{scope.row.ps}}</div>
					</template>
				</el-table-column>
				<!--       <el-table-column
        label="操作"
        width="220"
        align="center"
        class-name="operation"
        >
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="editRow(scope.$index, tablemenu)"
            type="text"
            size="small" class="tabbtn">
            修改
          </el-button>
          <el-button
           @click.native.prevent="deleteRow(scope.$index, tablemenu)"
            type="text"
            size="small" class="tabbtn">
            删除
          </el-button>
        </template>

      </el-table-column> -->
			</el-table>
			<!--     <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        class="pagelist"
        :total="40">
      </el-pagination> -->
			<el-button type="primary" @click="clkadd(multipleSelection)">添加</el-button>
		</div>
		<el-dialog title="更多信息" :visible.sync="dialoglistVisible" width="30%">
      <ul>
        <li v-for="(item,index) in morelist" :key="index"><icon-svg :icon-class="item.icon" ></icon-svg>{{item.name}}</li>
      </ul>
    </el-dialog>
	</div>
</template>

<script>
	import searchAdd from "@/components/searchAdd";
	import { getParentmenu } from "@/api/menu";
	import { getAllmenu } from "@/api/menu";
	export default {
		name: "AddPosition",
		components: {
			searchAdd
		},
		data() {
			return {
				currentPage: 1,
				options: [{
						value: "选项1",
						label: "地图链接"
					},
					{
						value: "选项2",
						label: "平台链接"
					},
					{
						value: "选项3",
						label: "外部链接"
					}
				],
				value: "全部",
				dialoglistVisible: false,
				morelist: [],
				multipleSelection: [],
				tablemenu: []
			};
		},
		created() {
			this.getSchemeData();
		},
		methods: {
			addmenu() {
				this.$router.push("/menu/add");
			},
			seeMore(list) {
				this.dialoglistVisible = true;
				this.morelist = list;
				console.log(list);
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			deleteRow(e) {

				this.tablemenu.splice(e, 1);
			},
			editRow(e) {
				this.$route.push({
					name: '编辑菜单',
					params: {
						list: this.tablemenu[e]
					}
				})
				console.log(e)
			},
			getcell() {

			},
			clkadd(multipleSelection) {
				// console.log(multipleSelection)
				this.$emit("AddPositionHandle", multipleSelection)
				this.$refs.multipleTable.clearSelection()
			},
			changeFun(val) {
				this.multipleSelection = val;
			},
			getSchemeData() {
				getAllmenu().then(result => {
					var tablelist = [];
					let data = result.data;
					var json = {}; //去重的中间变量
					for(var i = 0; i < data.length; i++) {
						if(data[i]["parentPrivilegeFunction"] == null) {

						} else {
							if(!json[data[i]["parentPrivilegeFunction"].id]) {
								var obj = new Object();
								obj.name = data[i]["parentPrivilegeFunction"].displayname;
								obj.id = data[i]["parentPrivilegeFunction"].id;
								obj.imgsrc = data[i]["parentPrivilegeFunction"].image;
								obj.ps = data[i]["parentPrivilegeFunction"].remark;
								obj.sort = data[i]["parentPrivilegeFunction"].sort;
								obj.submenus = [];
								var objchild = new Object();
								objchild.name = data[i].name;
								objchild.id = data[i].id;
								objchild.icon = data[i].image;
								objchild.uri = data[i].uri;
								objchild.type = data[i].displayname;
								obj.submenus.push(objchild);
								tablelist.push(obj);
								json[obj.id] = 1;
							} else {
								for(var j = 0; j < tablelist.length; j++) {
									if(data[i]["parentPrivilegeFunction"].id == tablelist[j].id) {
										var objchild = new Object();
										objchild.name = data[i].name;
										objchild.id = data[i].id;
										objchild.icon = data[i].image;
										objchild.uri = data[i].uri;
										objchild.type = data[i].displayname;
										tablelist[j].submenus.push(objchild);
									}
								}
							}
						}
					}
					console.log(tablelist);
					this.tablemenu = tablelist;
				})
			}
		}
	};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.menulist {
		background: white;
		padding: 8px;
		border-radius: 8px;
		.el-breadcrumb {
			font-size: 1.2em;
			padding: 8px;
			position: relative;
			padding-left: 40px;
		}
		.el-breadcrumb__item::after {
			position: absolute;
			left: 12px;
			top: -2px;
			display: inline-block;
			margin: 12px 10px 0 12px;
			vertical-align: bottom;
			width: 8px;
			height: 18px;
			background-color: #2ce2e0;
			content: ''
		}
	}
	
	.main {
		padding: 8px 26px;
	}
	
	.serarchadd {
		margin: 10px 0;
	}
	
	.lable {
		margin-right: 8px;
	}
	
	#menutable th {
		background: #29313d !important;
		color: white;
		border-color: #9f9f9f;
	}
	
	#menutable th,
	#menutable td {
		text-align: center;
	}
	
	#menutable .mname {
		text-align: left;
		padding: 0 !important;
		margin: 0 !important;
		div {
			margin: 0 -7px;
			;
		}
	}
	
	#menutable .tablelist {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}
	
	#menutable .tablelist li {
		flex: 1;
		padding: 0 10px;
		text-align: left;
		border-bottom: 1px solid #ebeef5;
	}
	
	#menutable .tablelist li:last-child {
		border-bottom: none;
	}
	
	#menutable .linktype li {
		padding: 8px;
	}
	
	.more {
		margin-left: 20px;
	}
</style>